@php
$i = 1;
@endphp
@section('title',$category['cat_name'])

@section('keywords',$category['keywords'])

@section('description',$category['desc'])

@extends('web.layout')
@section('head')
    <script type="text/javascript" src="/statics/js/TouchSlide.1.1.js"></script>
@endsection
@section('content')
<!--轮播图-->
<div class="weui-pull-to-refresh__layer">
    <div class='weui-pull-to-refresh__arrow'></div>
    <div class='weui-pull-to-refresh__preloader'></div>
    <div class="down">下拉刷新</div>
    <div class="up">释放刷新</div>
    <div class="refresh">正在刷新</div>
</div>
<div id="content">
    @if($banners)
    <div id="focus" class="focus travel">
        <div class="hd">
            <ul></ul>
        </div>
        <div class="bd">
            <ul>
                @foreach($banners as $banner)
                    @if($i==1)
                        <li>
                    @endif
                            <div class="listBd">
                                <a href="{{route('wap.post-index',$banner['id'])}}">
                                <div class="content" style="background:url('{{asset('storage/'.$banner['thumb'])}}') no-repeat center;background-size: cover"></div>
                                <p>{{$banner['post_title']}}</p>
                                </a>
                            </div>
                            @php
                                $i++;
                            @endphp
                    @if($i==4)
                        </li>
                        @php
                            $i=1;
                        @endphp
                    @endif
                @endforeach
            </ul>
        </div>
    </div>
    @endif
    <script type="text/javascript">
        TouchSlide({
            slideCell: "#focus",
            titCell: ".hd ul", //开启自动分页
            mainCell: ".bd ul",
            effect: "left",
            autoPlay: true, //自动播放
            autoPage: true, //自动分页
        });
    </script>
</div>
<div class="travelList">

    <ul id="travelList-ul">

    </ul>

</div>
<div class="weui-loadmore" id="load-more">
    <i class="weui-loading"></i>
    <span class="weui-loadmore__tips">正在加载</span>
</div>
<div class="weui-loadmore weui-loadmore_line" style="display: none" id="load-more-none">
    <span class="weui-loadmore__tips" style="background: rgba(158, 158, 158, 0);">暂无更多数据</span>
</div>
@endsection
@section('foot')
<script>
    var loading = false;
    var _url = '{{route('wap.post-list-ajax',$category['slug'])}}';
    var p = 1;
    var count =10;
    //页面初次加载
    load();
    //上拉刷新
    $(document.body).pullToRefresh(function () {
        refresh()
    });
    //下拉加载
    $(document.body).infinite().on('infinite',function () {
        load();
    });
    function refresh () {
        $.get(_url,{
            category_id:{{$category['id']}},
            limit:10,
            page:1,
            d:'pull'
        },function (e) {
            $(document.body).pullToRefreshDone();

            $('#travelList-ul').html(e)
            if(count<10){
                loading=true
                $('#load-more').hide();
                $('#load-more-none').show();
            }else{
                p=2;
                $('#load-more-none').hide();
                loading = false;
            }
        })
    }
    function load () {
        if(loading) return;
        loading = true;
        $.get(_url,{
            category_id:{{$category['id']}},
            limit:10,
            page:p,
            d:'load'
        },function (e) {
            $('#travelList-ul').append(e)
            if(count<10){
                loading=true
                $('#load-more').hide();
                $('#load-more-none').show();
            }else{
                p++;
                loading = false;
            }
        })
    }
</script>
@endsection